//引入API
import {createRouter,createWebHashHistory} from "vue-router"

//引入页面
// import Home from "../views/Home.vue"
// import About from "../views/About.vue"
const Home =()=>import("../views/Home.vue")
const About =()=>import("../views/About.vue")

const  UserCenter=()=>import("../views/user-center/index.vue")
const  UserProfile=()=>import("../views/user-center/Profile.vue")
const  UserSettings=()=>import("../views/user-center/Settings.vue")

const NotFound=()=>import("../views/404.vue")

const VuexPage=()=>import("../views/Vuex.vue")

//注册路径及页面，定义路由规则
const routes =[
    {
        path:"/",
        redirect:"/home"

    },
    {
        path:"/home",
        name:"home",
        component:Home
    },
    {
        path:"/about",
        name:"about",
        component:About
    },
    {
        path:'/vuex',
        name:'vuex',
        component:VuexPage
    },
    {
        path:"/user",
        name:"UserCenter",
        component:UserCenter,
        redirect:"/user/profile",
        children:[
            {
                path:"profile",//======/user/profile
                name:"profile",
                component:UserProfile
            },
            {
                path:"settings",//======/user/settings
                name:"settings",
                component:UserSettings
            },
        ]
    },
    {
        path:'/:pathMatch(.*)*',
        name:'NotFound',
        component:NotFound
    }
]


//创建VueRouter的实例化对象

const router = createRouter({
    history:createWebHashHistory(),
    routes
})

// router.beforeEach((to,from,next) =>{
//     console.log('beforeEach to',to);
//     console.log('beforeEach from',from);
//     next()
// })

// router.beforeEach((to,from,) =>{
//     console.log('beforeEach to',to);
//     console.log('beforeEach from',from);
// })


export default router